/*
 * @Author: quit
 * @Date: 2023-02-28 08:20:22
 * @LastEditTime: 2023-02-28 14:57:37
 * @Descripttion:
 * 1. children 属性表示组件标签的子节点,当组件标签有子节点时,props就会有该属性
 * |-- children属性与普通的props一致可以是任意值
 * 2. props的校验
 * 3. props的默认值
 * @notice:
 */

// 1
function Hello(props) {
    props.children() // 当为一个函数时可以直接调用
    return (
        <div>
            <span>当前组件的子节点：{props.children}</span>
        </div>
    )
}
/**
 * 在使用时props的children为当前div标签及内容,也可以是一个组件或者JSX、函数
 */
const a = (
    <Hello>
        {/* <div> 我是当前标签的子节点 </div> */}
        {() => {
            console.log('这是一个函数')
        }}
    </Hello>
)

// 2
// 创建者
function App(props) {
    const arr = props.colors
    const lis = arr.map((item, index) => (
        <li key={index}>
            <span>{item.name}</span>
        </li>
    ))
    return <ul>{lis}</ul>
}

import PropTypes from 'prop-types'

App.propTypes = {
    colors: PropTypes.array.isRequired,
    fn: PropTypes.func,
    tag: PropTypes.element,
    filters: PropTypes.shape({ area: PropTypes.string, price: PropTypes.number })
}
// 使用者
const b = <App colors={19} />
/**
 * 在使用者和创建者 不是同一个人并且在使用时会因为传入的props不同或者需要数据未知时会报错,这时就需要对props进行校验
 * |-- App.propsTypes = {colors:PropsTypes.array}
 * |--- 使用这个功能需要安装一个npm包为 prop-types --- `yarn add prop-types` || `npm install prop-types`
 * |---- 安装完成后需要在使用的JS文件中导入当前包 import PropsTypes from 'prop-types'
 * |----- 使用 组件名.propType={ propsName.PropsTypes.typeName } 给组件的props添加校验规则
 * |------ 常见约束类型 array bool func number object string
 * |------- Component.propTypes = { propsName.PropsType : array }
 * |------ React元素类型 element
 * |------- Component.propTypes = { propsName.PropsType : element }
 * |------ 必填项 isRequired
 * |------- Component.propTypes = { propsName.PropsType : array.isRequired }
 * |------ 特定结构的对象  shape({})
 * 更多的类型校验规则可以在 https://reactjs.org/docs/typechecking-with-proptypes.html 查看
 */

// 3
/**
 * 在使用props时有一些数据可以传入但是又需要有一个默认值这种情况使用 组件名.defaultProps = {}
 */
// 在组件中可以通过props.pageSize 获取到pageSize的值为10,即便是在使用组件时并没有传入props及值;可以结合校验PropTypes结合使用
App.defaultProps = {
    pageSize: 10
}
